<template>
    <div class="goods-info-container">
        <!-- 小球动画 -->
        <transition
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter">
            <div v-show="flag" class="ball"></div>
        </transition>
        <!-- 轮播图区域 -->
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <swiper :lunbotu="lunbotu" :imgname="'src'" :isfull="false"></swiper>
                </div>
            </div>
        </div>

        <!-- 商品购买区域 -->
        <div class="mui-card">
            <div class="mui-card-header">{{goodsinfo.title}}</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p class="price">销售价：
                        <span style="font-weight:bold;color:red;font-size:17px;margin-right:10px">￥{{goodsinfo.sell_price}}</span>
                        <span ><del>市场价：￥{{goodsinfo.market_price}}</del></span>
                    </p>
                    <p>
                        <!-- 使用数量增减组件 -->
                        <numbox :max="goodsinfo.stock_quantity" @numTrans="addBoxNum"></numbox>                    
                    </p>    
                    <div class="buy">
                        <mt-button type="primary" size="small" style="">立即购买</mt-button>
                        <mt-button type="danger" size="small" style="" 
                        @click="addToCart">加入购物车</mt-button>                    
                    </div>
                </div>
            </div>
        </div>

        <!-- 商品参数区域 -->
        <div class="mui-card">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p class="huohao">商品货号：{{goodsinfo.goods_no}}</p>
                    <p class="huohao">库存情况：{{goodsinfo.stock_quantity}}件</p>
                    <p class="huohao">上架时间：{{goodsinfo.add_time | dateFormat}}</p>
                </div>
            </div>
            <div class="mui-card-footer">
                <!-- <router-link :to="'/home/goodsdesc/'+goodsid">
                    <mt-button type="primary" size="large" plain style="margin-bottom:10px;">图文介绍</mt-button>
                </router-link> -->
                <!-- 改用编程式导航 -->
                <mt-button @click="goDesc" type="primary" size="large" plain style="margin-bottom:10px;">图文介绍</mt-button>
                <mt-button @click="goComment" type="danger" size="large" plain style="">商品评论</mt-button>
            </div>
        </div>
    </div>

</template>

<script>
// 导入轮播图组件
import swiper from '../sub-components/Swiper.vue'
// 导入数量增减组件
import numbox from '../sub-components/NumBox.vue'
// 导入mutations映射函数，为了更新加入购物车的商品信息
import {mapMutations} from 'vuex'
// 导入state映射函数，为了获取加入购物车的商品信息
// import {mapState} from 'vuex'
// 导入Getters映射函数，为了获得购物车商品总数量
import {mapGetters} from 'vuex'

export default {
    props:['goodsid'],
    data:function (){
       return {
           lunbotu:[],
           goodsinfo:{},
           flag:false,// 小球状态
           boxNum:1,// 数量框传过来的当前值
       } 
    },
    created:function(){
        this.getGoodsThum();
        this.getGoodsInfo();
    },
    methods:{
        // 映射mutations里的函数
        ...mapMutations(['btnAddToCart']),

        getGoodsThum:async function(){
            const {data} = await this.$http.get("/api/getthumimages/"+this.goodsid);
            console.log(data);
            if(data.status===0) this.lunbotu=data.message;
        },
        getGoodsInfo:async function(){
            const {data} = await this.$http.get('/api/goods/getinfo/'+this.goodsid);
            console.log(data);
            if(data.status===0) this.goodsinfo=data.message[0];
        },
        // 使用vue-router的编程式导航，点击“图文介绍按钮，就跳转到相关页面
        // this.$route是用来获取路由参数的
        // this.$router是用来实现编程式导航的
        goDesc:function(){
            this.$router.push("/home/goodsdesc/"+this.goodsinfo.id);
        },
        goComment:function(){
            this.$router.push("/home/goodscomment/"+this.goodsinfo.id);
        },
        addToCart:function(){
        // 点击加入购物车
            this.flag=!this.flag;
            // 调用mutations的函数
            this.btnAddToCart({
                id:this.goodsid,
                count:this.boxNum,
                selected:true, 
                price:this.goodsinfo.sell_price             
            });
        },
        // 小球动画函数
        beforeEnter:function(el){
            el.style.transform="translate(0,0)";
        },
        enter:function(el,done){
            el.offsetWidth;
            // 获取小球的位置
            const ballPos=el.getBoundingClientRect();
            // 直接通过获取页面上的元素，来获取购物车徽标的位置
            const badgeballPos=document.getElementById('badgeball').getBoundingClientRect();
            // console.log(ballPos);
            // 计算动画过程位置的该变量
            const x = badgeballPos.left - ballPos.left + 'px';
            const y = badgeballPos.top - ballPos.top + 'px';
            el.style.transform=`translate(${x},${y})`;
            el.style.transition="all .6s cubic-bezier(.61,-0.24,.54,.64)";
            done();
        },
        afterEnter:function(el){
            this.flag =! this.flag;
            // 动画结束之后，通过vuex映射获取购物车商品总数量，更新徽标显示的数量
            // 首先在根组件页面渲染的时候也要这样做
            document.getElementById('badgeball').innerHTML=this.total;
        },
        addBoxNum:function(num){
            // 处理数量框传递过来的数据
            this.boxNum = num;
            console.log(this.boxNum);
        },
    },
    computed:{
        // 映射state里的数据
        // ...mapState(['cart']),
        // 映射getters里的数据
        ...mapGetters(['total'])
    },
    components:{
        // 注册轮播图组件
        swiper,
        // 注册数量增减组件
        numbox,
    }
}
</script>

<style lang="scss" scoped>
// 总
.goods-info-container{
    background-color: #eee;
    overflow: hidden;
}
// 添加到购物车的球
.ball{
    position: absolute;
    left: 152px;
    top: 372px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: red;
    z-index: 100;
    // transform: translate(110px,318px);
}
// 底部按钮样式
.mui-card-footer, .mui-card-header {
    display:block;
}
</style>